<template>
  <view class="main-top">
    <view class="main-top-bar"/>
    <view class="bar">
      <TypeSection @getCategory="getCategory" :category="category"/>
    </view>
    <view style="height: 40px"/>
    <view class="icon_div" v-if="groupList.length === 0">
      <image class="icon" src="/static/icons/none.svg"/>
      <money-key/>
    </view>
    <view v-if="groupList.length !== 0">
      <view v-for="(item,index) in groupList" :key="index" class="lll">
        <view class="date_div" v-if="item.date">{{item.date}}</view>
        <view class="card">
          <uni-swipe-action>
            <uni-swipe-action-item>
              <view class="record_list">
                <view class="record_items" @click="editX(item)">
                  <view class="left">
                    <Icon :iconName="$store.getters.getItemIcon(item.tagIds[0])"/>
                  </view>
                  <view class="center">
                    <view style="display: flex">
                      <image class="img" :src="$store.getters.getBookUserIcon(item.u_id)" />
                      <text class="nameSpan">{{$store.getters.getItemName(item.tagIds[0])}}</text>
                    </view>
                    <text class="noteSpan">{{item.note || '无备注'}}</text>
                  </view>
                  <view class="right">
                    <text class="amountSpan">￥{{item.amount}}</text>
                    <text class="dateSpan">{{itemDate(item)}}</text>
                  </view>
                </view>
              </view>
              <template v-slot:right>
                <view class="action-right" v-if="showDel(item.u_id)" @click="delRecode(item)">
                  <text>删除</text>
                </view>
              </template>
            </uni-swipe-action-item>
          </uni-swipe-action>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import day from 'dayjs'
import { mapMutations, mapState } from 'vuex'
import TypeSection from '@/components/common/TypeSection/TypeSection'
import MoneyKey from '@/components/common/MoneyKey/MoneyKey'

export default {
  components: { TypeSection, MoneyKey },
  onShow() {
    this.$store.commit('fetchRecords')
    this.fetchLedgerLogo()
  },
  onLoad(e) {
    uni.$on('setCategory', c => {
      this.getCategory(c)
    })
  },
  data() {
    return { category: '-' }
  },
  computed: {
    ...mapState(['recordList', 'tagList', 'userInfo']),
    groupList() {
      const { recordList } = this
      const ss = recordList.filter(i => i.category === this.category)
      return ss.map((i, k) => {
        delete i.date
        const date = i.createdAt.split('T')[0]
        if (k === 0) {
          i.date = date
        } else {
          const before = ss[k - 1].createdAt.split('T')[0]
          if (before !== date) {
            i.date = date
          }
        }
        return i
      })
    },

    itemDate() {
      return (item) => {
        return day(item.createdAt).format('HH:mm')
      }
    }
  },
  methods: {
    ...mapMutations(['delRecode', 'fetchLedgerLogo']),
    showDel(id) {
      return this.userInfo.id === id
    },
    getCategory(category) {
      this.category = category
    },
    editX(item) {
      if (!this.showDel(item.u_id)) {
        this.$api.alert('不是本人的账单，无法编辑')
        return
      }
      const url = `/main/Home/childComps/Money/Money?id=${item.id}`
      uni.navigateTo({ url })
    }
  }
}

</script>

<style lang="scss" scoped>
  .main-top-bar{
    background-color: white;
    z-index: 1000;
  }
  .bar{
    position: fixed;
    background-color: white;
    width: 100%;
    z-index: 1000
  }
  .lll{
    padding: 0 24rpx;
    margin-bottom: 12rpx;
    .card{
      background-color: #f9faf5;
      border-radius: 20rpx
    }
  }
  .action-right{
    border-top-right-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $uni-color-primary;
    width: 100rpx;
    height: 100%;
    padding: 0 12rpx;
    color: white
  }
  .icon_div {
    .icon {
      width: 148px;
      height: 148px;
    }
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 20px;
    text-align: center;
    font-size: 24px;
  }

  .date_div {
    font-size: 16px;
    color: $uni-color-primary;
    font-weight: 700;
    padding: 10px;
  }

  .record_list {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .record_items {
    padding: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .left {
      padding-right: 10px;
      flex-shrink: 0;

      .icon {
        width: 42px;
        height: 42px;
      }
    }

    .center {
      flex: 1;
      display: flex;
      flex-direction: column;

      .img{
        margin-right: 16rpx;
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
      }

      .nameSpan {
        font-size: 18px;
        font-weight: 700;
      }

      .noteSpan {
        margin-top: 8px;
        color: #666;
        font-size: 14px;
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }

    .right {
      display: flex;
      flex-shrink: 0;
      flex-direction: column;

      .amountSpan {
        font-size: 18px;
        font-weight: 700;
      }

      .dateSpan {
        margin-top: 8px;
        color: #666;
        font-size: 14px;
        text-align: right;
      }
    }

  }
</style>
